<template>
	<view class="bg min100">
		<!-- <view class="status_bar"></view> -->
		<!-- <image class="logo" src="../../static/logo.png" mode=""></image> -->
		<!-- <view class="login-head">
			<view class="status_bar"></view>
		</view> -->
		<view class="login-mian">
			<view class="login-close">
				<image src="/static/login-close.png" mode="" @click="toHome"></image>
			</view>
			<view class="login-mian-title flex flex-start pt-40 pb-40 mt-100" style='align-items: flex-start;'>
				<view style='position: relative; height: 58rpx;'>
					<view class="login-mian-title-left size-30 white" :class="{activeLogin : type == 1}" @click="type = 1">密码登录</view>
					<view class="under-line" v-if='type == 1'></view>
				</view>
				<view class="ml-50" style='position: relative; height: 58rpx;'>
					<view class="white size-30" :class="{activeLogin : type == 2}" @click="type = 2">验证码登录</view>
					<view class="under-line" v-if='type == 2'></view>
				</view>
			</view>
			<view class="radius-46 bg-1 mt-30 int-login">
				
				<u-field v-model="phone" type="number" maxlength="11" :border-bottom="false" label-width="0" placeholder="请输入手机号码"
					placeholder-style="color:#666;font-size:26rpx;" style='border-radius: 46rpx;'>
				</u-field>
			</view>
			<view class="mt-40 radius-46  mt-30  bg-1 int-login">
				<u-field v-model="password" v-if="type == 1" :border-bottom="false" label-width="0"
					placeholder="请输入8-16位字符，数字字母组合的登录密码" placeholder-style="color:#666;font-size:26rpx;"
					type="password" style='border-radius: 46rpx;'>
				</u-field>
				<u-field v-model="captcha" v-else :border-bottom="false" label-width="0" placeholder="请填写验证码" placeholder-style="color:#666;font-size:26rpx;">
					<u-button size="mini" hover-class="none" class="code" slot="right" @click="getCode">{{codeText}}
					</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</view>

			<u-button class="login-btn" hover-class="none" @click="login">登录</u-button>
			<view class="flex flex-between mt-30 size-32">
				<view class="login-footer flex1 flex-middle" @click="isConsent = !isConsent">
					<image src="/static/select-pink.png" mode="" v-if="isConsent"></image>
					<image src="/static/select.png" mode="" v-else></image>
					<text>登录即表明同意 <text @click.stop="toUserContent">《用户协议》</text> </text>
				</view>
				<!-- <view class="white size-30" @click="type = type == 1 ? 2 : 1">{{ type == 1 ? '验证码登录' : '密码登录' }}</view> -->
				<view @click="goForget" class="white size-30">忘记密码</view>
			</view>
			<view style='position: fixed;bottom: 150rpx;width: 100%'>
				<view class="login-mian-title-more flex1 flex-middle flex-center mt-100" @click="goRegister">
					<text>没有账号？点击注册</text>
					<image src="/static/login-more.png" mode=""></image>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				phone: '',
				password: "",
				isConsent: true, //
				type: 1, //1密码2验证码
				code: '',
				captcha:'',//
				codeText: '获取验证码'
			}
		},
		methods: {
			//去用户协议
			toUserContent () {
				uni.navigateTo({
					url:'/pages/login/register_content'
				})
			},
			codeChange(e) {
				this.codeText = e
			},
			getCode() {
				if (!this.phone.match(/^(0|86|17951)?1[3456789]\d{9}$/)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('api/login/sendCode', {
						phone: this.phone,
						type: 7
					}, 'POST').then(data => {
						uni.showToast({
							title: "发送成功",
							icon: 'none'
						})
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}).catch(() => {
						// clearInterval(this.countDownTimer)
						// this.countDownTimer = null
						// this.vscode = "获取验证码";
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			goRegister() {
				uni.navigateTo({
					url: "./register"
				})
			},
			goForget() {
				uni.navigateTo({
					url: "./forgetPsd"
				})
			},
			login() {
				if (!this.isConsent) return uni.showToast({
					title: '请阅读并勾选用户协议',
					icon: 'none'
				})
				if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					})
					return;
				}
				if (this.type == 1) {
					if (this.password == '') {
						uni.showToast({
							title: "请输入密码",
							icon: 'none'
						})
						return;
					}
				} else {
					if (!this.captcha) return uni.showToast({
							title: "请输入验证码",
							icon: 'none'
						})
				}
				
				// 登录
				this.$http(this.type == 1 ? 'api/login/login' : 'api/Newapi/captchaLogin', this.type == 1 ? {
					phone: this.phone,
					password: this.password
				} : {
					phone: this.phone,
					captcha:this.captcha
				}).then(res => {
					uni.showToast({
						title: '登录成功'
					})
					uni.setStorageSync("token", this.type == 1 ? res.app_token : res)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}, 500)
				})
			},
			toHome () {
				uni.switchTab({
					url:'/pages/home/index'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="less" scoped>
	.bg{
		background: url('@/static/login-bj.png') no-repeat;
		background-size: cover;
	}
	.login-head {
		padding: 0 30rpx;
		background: url('@/static/login-bj.png') no-repeat;
		background-size: cover;
		height: 574rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 80rpx;
		}
	}
	.login-close {
		
		display: flex;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-top: 30rpx;
			margin-right: 10rpx;
			margin-left: auto;
		}
	}

	.login-mian {
		padding: 0 30rpx;
		// margin-top: -150rpx;
		position: relative;
		// background: #1f1b2f;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
	}
	
	.activeLogin{
		// border-bottom: 2rpx solid #fff;
		color: #e66633;
	}
	.login-mian-title{
		.under-line{
			width: 100%;
			height: 6rpx;
			background: linear-gradient(90deg, #eea634, #de2d32);
			position: absolute;
			bottom: 0;
			border-radius: 24rpx;
		}
	}
	

	.login-mian-title-more {
		text {
			color: #f5f5f5;
			font-size: 30rpx;
		}

		image {
			width: 26rpx;
			height: 26rpx;
			margin-left: 10rpx;
		}
	}

	.login-btn {
		color: #f5f5f5;
		font-size: 30rpx;
		height: 78rpx !important;
		background: linear-gradient(-90deg, #EEA634, #DE2D32);
		border-radius: 49rpx;
		line-height: 98rpx;
		margin-top: 100rpx;

		&::after {
			border: none;
		}
	}

	.login-footer {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}

		text {
			color: #f5f5f5;
			font-size: 24rpx;
		}
	}

	.logo {
		width: 458rpx;
		height: 80rpx;
		display: block;
		margin: 0 auto;
	}

	.u-checkbox-group {
		width: 100%;

		/deep/ .u-checkbox {
			width: 90%;
			margin: 0 auto;
			text-align: center;
			font-size: 20rpx;
		}

		/deep/ .u-checkbox__label {
			margin-right: 0;
		}

		text {
			color: #EFAA1C;
		}
	}

	/deep/ .u-field {
		height: 98rpx;
		color: #282828;
		background: #fff;
		border-radius: 46rpx;
	}

	.code {
		width: 170rpx;
		color: #f5f5f5;
		line-height: 60rpx;
		height: 60rpx !important;
		background: #666;
		// background: linear-gradient(-90deg, #EEA634, #DE2D32);
		border-radius: 46rpx;

		&::after {
			border: none;
		}
	}
	.int-login {
		// transform: scaleY(0.9);
	}
</style>
